<template>
  <div ref="pie" :style="{width:width,height: height}"></div>
</template>
<script>
export default {
  name: 'Pie',
  data() {
    return {
      mychartIndoor:null,
      pieData:[],
      timer:0
    }
  },
  props:{
    formatter:{
      type:Boolean,
      default:true,
    },
    text:{
      type:String,
      default:""
    },
    subtext:{
      type:Number,
      default:null
    },
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    data:{
      type:Array,
      default:()=>{
        return [
        {
          value: 110,
          name: '构建区',
          itemStyle: {}
        },
        {
          value: 222,
          name: '角色区',
          itemStyle: {}
        },
        {
          value: 113,
          name: '阅读区',
          itemStyle: {}
        },
        {
          value: 122,
          name: '图书区',
          itemStyle: {}
        },
        {
          value: 122,
          name: '益智区',
          itemStyle: {}
        },
        {
          value: 132,
          name: '科学区',
          itemStyle: {}
        },
        {
          value: 25,
          name: '小厨房',
          itemStyle: {}
        }
        ]
      }
    }
  },
  watch:{
    data:{
      handler(val){
        this.pieData = val;
        this.getEchart();
      },
      deep:true
    }
  },
  components: {},

  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {
    
  },

  methods: {
    getEchart() {
      this.mychartIndoor = this.$echarts.init(this.$refs.pie)
      let _this = this;
      let optionIndoor = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center',
          y: '41%',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#999999'
          },
          subtextStyle: {
            fontSize: 22,
            color: '#1890ff'
          }
        },
        color: [
          '#0090ff',
          '#06d3c4',
          '#ffbc32',
          '#2ccc44',
          '#ff3976',
          '#6173d6',
          '#ff9f7e',
          '#5f71d2',
          '#f36f8a',
          '#5fd27b',
          '#6173d6',
          '#47dfae',
          '#4ac7f5',
          '#f36f8a',
          '#42a4eb',
          '#426eeb',
          '#5f71d2',
          '#f36f8a'
        ],

        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function(params){
            var relVal = params.name;
            if (_this.formatter) {
              relVal += '：' +params.value+'次' + '<br/>' +"占比："+params.percent + "%"
            }else{
              relVal += '今日共：' +params.value+'人' 
            }
            return relVal
          },
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
        },
        series: [
          {
            itemStyle: {
              //图形样式
              normal: {
                borderColor: '#fff',
                borderWidth: 4
              }
            },
            type: 'pie',
            stillShowZeroSum: true,
            radius: ['40%', '84%'],
            label: {
              normal: {
                position: 'inner',
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis:{
                disable:true,  //是否关闭扇区高亮效果
                scale:true,    //扇区是否缩放
                scaleSize:15,    //放大的尺寸，这里为了保证不放大扇区设置的，可要可不要
            },
            data: this.pieData
          }
        ]
      }
      this.mychartIndoor.setOption(optionIndoor);
      
      window.addEventListener("resize", ()=>{
        _this.resizePie();
      })
    },
    resizePie(){
      this.mychartIndoor &&this.mychartIndoor.resize();
    },
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>
